<template>
  <div>
    <div class="his-hot">
      <div class="hd">
        <h4>热门搜索</h4>
      </div>
      <div class="bd">
        <van-tag
          plain
          type="primary"
          color="#666"
          v-for="(item, index) in hotword"
          :key="index"
          @click="tagClick(item.keyword)"
          >{{ item.keyword }}</van-tag
        >
      </div>
    </div>
  </div>
</template>

<script>
import { GETHOTWord } from "@/request/api";
export default {
  data() {
    return {
      hotword: [],
    };
  },
  methods: {
    tagClick(val) {
      console.log("tagClick1", val);
      // 发起搜索商品的请求
      this.$emit("tagClick", val);
    },
  },
  created() {
    GETHOTWord().then((res) => {
      // console.log(res.data.data)
      this.hotword = res.data.data;
    });
  },
  // export const GETHOTWord=()=>YouAxios.get("pro/hotword")
};
</script>

<style>
.his-hot {
  /* min-height: 2rem; */
  background-color: #fff;
  padding: 0.1rem 0.1rem 0;
  margin-bottom: 0.2rem;
}
.hd {
  display: flex;
  justify-content: space-between;
  font-size: 0.18rem;
  margin-bottom: 0.1rem;
}

h4 {
  font-size: 0.18rem;
}

.van-tag {
  margin-right: 0.1rem;
  padding: 0 0.04rem;
  margin-bottom: 0.1rem;
}
</style>